<div class="scrap-container">
    <div class="scrap-title" fxLayout="row" fxLayoutAlign="space-between center">
        <span>报废历史</span>
        <div fxLayout="row">
            <button class="btn-primary btn-scrap" (click)="open()">报废</button>
            <span class="btn-close" fxLayoutAlign="center center" (click)="close()"><i class="material-icons text-xxxl">close</i></span>
        </div>
    </div>
    <div class="scrap-content">
        <y-scrollable-container (change)="pagingMessageChange($event)">
            <section *ngFor="let scrap of scrapList$|async" class="scrap-item pct60 margin-t-s" item>
                <div fxLayout="row" fxLayoutAlign="space-between center" class="padding">
                    <span>{{scrap.createTime | timeFormat:'YYYY-MM-DD HH:mm:ss'}}</span>
                    <span>报废菜品种类：{{scrap.scrapCategoryQuantity}} 种</span>
                </div>
                <div fxLayout="row" fxLayoutAlign="space-between center" class="padding no-padding-t">
                    <span>报废终端：{{terminalName}}</span>
                    <span>报废菜品数量：{{scrap.scrapQuantity}} 份</span>
                </div>
                <div class="scrap-detail">
                    <div class="detail-title padding" fxLayout="row">
                        <span fxFlex="10%"></span>
                        <span fxFlex="75%" fxLayoutAlign="start center">商品名称</span>
                        <span fxFlex="15%" fxLayoutAlign="end center">数量</span>
                    </div>
                    <ul class="scrap-list">
                        <li *ngFor="let item of scrap.storageReceiptItems, let i = index">
                            <span fxFlex="10%" fxLayoutAlign="center center">#{{i+1}}</span>
                            <span fxFlex="75%" fxLayoutAlign="start center">{{item.inventory.name}}</span>
                            <span fxFlex="15%" fxLayoutAlign="end center">{{item.quantity}}</span>
                        </li>
                    </ul>
                </div>
            </section>
        </y-scrollable-container>
    </div>
</div>
